﻿@page "/datagrid/virtual-scrolling"

@using Syncfusion.Blazor.Grids
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent;
@using BlazorDemos
@using blazor_griddata

<SampleDescription>
    <p>This sample demonstrates the DataGrid component with the horizontal and vertical scrollbars to view the exceeded DataGrid content.</p>
</SampleDescription>
<ActionDescription>
   <p>The DataGrid UI virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource. DataGrid supports both row and column virtualization. To enable row virtualization, set the <code><a target='_blank' class='code' href= 'https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization'>EnableVirtualization</a></code> property as true. For column virtualization, set the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridModel%601~EnableColumnVirtualization.html'>EnableColumnVirtualization</a></code> property as true.</p>
   <p>The height property must be defined when enabling the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization'>EnableVirtualization</a></code> property and width property must be defined when enabling <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization'>EnableColumnVirtualization</a></code>.</p>
   <p>In this demo, DataGrid is rendered with row and column virtualization. DataGrid is binded with 10000 rows and 20 columns</p>
    <p>More information on the Virtual Scrolling can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/virtual/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            @{
                if (Data)
                {
                    <span id="initialload" class="topload">Loading 10,000 Rows and 20 Columns</span>
                    <div class="loading">
                        <span id="spancontrol" class="visible">Generating Data </span>
                        <img src="@UriHelper.ToAbsoluteUri($"images/data-grid/spinner.gif")" />
                    </div>
                } else {
                    <span id="afterload" class="topload">Loaded 10,000 Rows and 20 Columns</span>
                }
             }
        <SfGrid DataSource="@GridData" Height="410" Width="auto" EnableHover="false" EnableVirtualization="true" EnableColumnVirtualization="true">
            <GridPageSettings PageSize="80"></GridPageSettings>
            <GridColumns>
                <GridColumn Field="Field1" HeaderText="PlayerName" Width="120"></GridColumn>
                <GridColumn Field="Field2" HeaderText="Year" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field3" HeaderText="Stint" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field4" HeaderText="TMID" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field5" HeaderText="LGID" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field6" HeaderText="GP" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field7" HeaderText="GS" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field8" HeaderText="Minutes" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field9" HeaderText="Points" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field10" HeaderText="oRebounds" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field11" HeaderText="dRebounds" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field12" HeaderText="Rebounds" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field13" HeaderText="Assists" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field14" HeaderText="Steals" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field15" HeaderText="Blocks" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field16" HeaderText="TurnOvers" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field17" HeaderText="PF" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field18" HeaderText="fgAttempted" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field19" HeaderText="fgMade" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                <GridColumn Field="Field20" HeaderText="ftAttempted" TextAlign="TextAlign.Right" Width="150"></GridColumn>
            </GridColumns>
        </SfGrid>
        </div>
    </div>
</div>


<style>
    .visible {
        display: inline-block;
        font-size: 18px;
        color: rgba(0,0,0,1);
    }

    .loading {
        position: absolute;
        height: 92%;
        width: 100%;
        background-color: rgba(1,1,1,0.2);
        z-index: 10000;
        display: flex;
        align-items: center;
        padding-left: 44%;
    }

    .topload {
        font-size : 15px;
    }
</style>
@code{

    public List<VirtualData> GridData { get; set; } = new List<VirtualData>();

    public Boolean Data = true;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(100);
        GridData = await GetAllRecords();
        Data = false;
    }

    public async Task<List<VirtualData>> GetAllRecords()
    {

        List<VirtualData> data = new List<VirtualData>(10000);
        Random random = new Random();
        await Task.Delay(10);
        string[] name = new string[] {"hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa",
          "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", "Robin Hood",
          "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn",
          "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", "Abdisalam", "Abdul", "Abdul-Aziz",
          "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur",
          "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar",
          "Ace", "Adain", "Adam", "Adam-James", "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya",
          "Adnan", "Adrian", "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham",
          "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee" };
        for (int i = 0; i < 10000; i++) {
            string Field1 = name[random.Next(96)];
            int Field2 = 1967 + (i % 10);
            int Field3 = (int)Math.Floor(random.NextDouble() * 200);
            int Field4 = (int)Math.Floor(random.NextDouble() * 100);
            int Field5 = (int)Math.Floor(random.NextDouble() * 2000);
            int Field6 = (int)Math.Floor(random.NextDouble() * 1000);
            int Field7 = (int)Math.Floor(random.NextDouble() * 100);
            int Field8 = (int)Math.Floor(random.NextDouble() * 10);
            int Field9 = (int)Math.Floor(random.NextDouble() * 10);
            int Field10 = (int)Math.Floor(random.NextDouble() * 100);
            int Field11 = (int)Math.Floor(random.NextDouble() * 100);
            int Field12 = (int)Math.Floor(random.NextDouble() * 1000);
            int Field13 = (int)Math.Floor(random.NextDouble() * 10);
            int Field14 = (int)Math.Floor(random.NextDouble() * 10);
            int Field15 = (int)Math.Floor(random.NextDouble() * 1000);
            int Field16 = (int)Math.Floor(random.NextDouble() * 200);
            int Field17 = (int)Math.Floor(random.NextDouble() * 300);
            int Field18 = (int)Math.Floor(random.NextDouble() * 400);
            int Field19 = (int)Math.Floor(random.NextDouble() * 500);
            int Field20 = (int)Math.Floor(random.NextDouble() * 700);
            data.Add(new VirtualData(Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10, Field11,
                Field12, Field13, Field14, Field15, Field16, Field17, Field18, Field19, Field20));
        }
        return data;
    }
}